<template>
  <div>
    <Page auto-content-height>
      <Grid table-title="图书列表">
        <template #web-url="{ row }">
          <span>{{ row.linkPrefix + row.linkUrl }}</span>
        </template>
        <template #toolbar-tools>
          <Button
            type="primary"
            @click="openDrawer({})"
            v-if="hasAccessByCodes(['ACTION_book_add'])"
          >
            新增
          </Button>
        </template>
        <template #bookName="{ row }">
          <span>{{ handleBookName(row.bookName) }}</span>
        </template>
        <template #classes="{ row }">
          <template
            v-for="(tag, index) in row.classesName.split('、')"
            :key="index"
          >
            <Tag>{{ tag }}</Tag>
          </template>
        </template>
        <template #tags="{ row }">
          <template
            v-for="(tag, index) in row.tagsName.split('#')"
            :key="index"
          >
            <Tag>{{ tag }}</Tag>
          </template>
        </template>
        <template #action="{ row }">
          <Button
            type="link"
            @click="openDrawer(row)"
            v-if="hasAccessByCodes(['ACTION_book_edit'])"
            >编辑</Button
          >
          <Popover title="" placement="bottom">
            <template #content>
              <template v-if="hasAccessByCodes(['ACTION_book_del'])">
                <Popconfirm
                  title="确定要删除该数据？"
                  @confirm="() => handleRemove(row)"
                >
                  <Button type="link">删除</Button>
                </Popconfirm>
              </template>
              <template v-if="hasAccessByCodes(['ACTION_book_state'])">
                <div v-if="row.state == '0'">
                  <Button type="link" @click="handleState(row)">上架</Button>
                </div>
                <div v-else-if="row.state == '1'">
                  <Button type="link" @click="handleState(row)">下架</Button>
                </div>
              </template>
              <template v-if="hasAccessByCodes(['ACTION_book_removal'])">
                <div v-if="row.state == '1'">
                  <Button type="link" @click="handleState2(row)"
                    >强制下架</Button
                  >
                </div>
                <div v-else-if="row.state == '2'">
                  <Button type="link" @click="handleState2(row)"
                    >取消下架</Button
                  >
                </div>
              </template>
            </template>
            <Button type="link">更多</Button>
          </Popover>
        </template>
      </Grid>
    </Page>
    <Drawer ref="dictDrawer" @success="() => gridApi.query()" />
  </div>
</template>

<script lang="ts" setup>
import { Page, useVbenDrawer } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { onMounted, ref } from 'vue';
import {
  formOptions,
  gridOptions,
  idKey,
  storeId,
  classList,
  tagList,
} from './data/options';
import { useAccess } from '@vben/access';
import { queryRemove, setStatus } from './data/api';
import { Button, Popconfirm, Popover, message, Tag } from 'ant-design-vue';
import { useStoreStore } from '#/store';
import EditDrawer from './components/editDrawer.vue';
import { handleBookName } from '#/utils/tools';
const { hasAccessByCodes } = useAccess();

const [Drawer, drawerApi] = useVbenDrawer({
  connectedComponent: EditDrawer,
});
const dictDrawer = ref(null);

onMounted(() => {
  initData();
});

//  初始化数据
const initData = async () => {
  console.log('initData');
  if (useStoreStore().classData().length == 0) {
    await useStoreStore().queryClassList({ storeId: storeId.value, state: 1 });
  }
  if (useStoreStore().tagData().length == 0) {
    await useStoreStore().queryTagList({ storeId: storeId.value, state: 1 });
  }
  classList.value = useStoreStore().classData();
  tagList.value = useStoreStore().tagData();
};

//  表格配置
const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});

// 打开抽屉
const openDrawer = (row: any) => {
  drawerApi.setData({
    ...row,
  });
  drawerApi.open();
};

// 删除
const handleRemove = async (row: any) => {
  let res: any = await queryRemove({ ids: row[idKey.value] });
  console.log(res);
  message.success(res.message);
  gridApi.query();
};

// 设置图书状态
const handleState = async (row: any) => {
  let res: any = await setStatus({
    ids: row[idKey.value],
    state: row.state == '1' ? '0' : '1',
  });
  console.log(res);
  message.success(res.message);
  gridApi.query();
};

// 强制下架
const handleState2 = async (row: any) => {
  let res: any = await setStatus({
    ids: row[idKey.value],
    state: row.state == '1' ? '2' : '1',
  });
  console.log(res);
  message.success(res.message);
  gridApi.query();
};
</script>
